<template>
    <div id="movie-tab">
        <ul>
            <router-link tag="li" to="/movie/city">
                北京<i class="fa fa-caret-down"></i>
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/now">
                正在热映
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/coming">
                即将上映
            </router-link>
            <router-link tag="li" to="/movie/search">
                <i class="fa fa-search"></i>
            </router-link>
        </ul>
        <keep-alive><router-view></router-view></keep-alive>
    </div>
</template>
<script>
export default {};
</script>
<style scoped>
#movie-tab {
    padding-top: 50px;
}
ul{
    display: flex;
    border-bottom: 1px solid #ccc;
    justify-content: space-around;
}
li {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-weight: 700;    
}
li:last-child{
    width: 10%;
   
}
.font-color{
    color: #666;
}
.fa-caret-down{
    margin-left: 5px;
}
.fa-search{
    font-size: 25px;
    color:#e54847;

}
.router-link-active{
    color:#e54847;
    border-bottom: 2px solid #e54847;
}
</style>
